<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>layout 后台大布局 - Layui</title>
		<link rel="stylesheet" href="layui/layui/css/layui.css">
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">layui 后台布局</div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item"><a href="">控制台</a></li>
					<li class="layui-nav-item"><a href="">商品管理</a></li>
					<li class="layui-nav-item"><a href="">用户</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">其它系统</a>
						<dl class="layui-nav-child">
							<dd><a href="">邮件管理</a></dd>
							<dd><a href="">消息管理</a></dd>
							<dd><a href="">授权管理</a></dd>
						</dl>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
							贤心
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">基本资料</a></dd>
							<dd><a href="">安全设置</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">退了</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed">
							<a class="" href="javascript:;">所有商品</a>
							<dl class="layui-nav-child">
								<dd class="layui-this"><a href="javascript:;">已发布文章</a></dd>
								<dd><a href="javascript:;">列表二</a></dd>
								<dd><a href="javascript:;">列表三</a></dd>
								<dd><a href="">超链接</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">解决方案</a>
							<dl class="layui-nav-child">
								<dd><a href="javascript:;">列表一</a></dd>
								<dd><a href="javascript:;">列表二</a></dd>
								<dd><a href="">超链接</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item"><a href="">云市场</a></li>
						<li class="layui-nav-item"><a href="">发布商品</a></li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<!--    <div style="padding: 15px;">内容主体区域</div> -->
				<!-- 表格显示 -->
				<div style="margin-top: 100px;"></div>
				<table class="layui-hide" id="test" lay-filter="test"></table>

				<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
	    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
	    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
	    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
	  </div>
	</script>

				<script type="text/html" id="barDemo">
					<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

			</div>

			<div class="layui-footer">
				<!-- 底部固定区域 -->
				© layui.com - 底部固定区域
			</div>
		</div>
		<script src="layui/layui/layui.js"></script>
		<script>
			//JavaScript代码区域
			layui.use(['element', 'table'], function() {
				var element = layui.element;
				var table = layui.table;
				table.render({
					elem: '#test',
					method: 'post',
					url: '/index.php/news/read_new_news',
					toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板	
					,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					title: '提示'
					,layEvent: 'LAYTABLE_TIPS'
					,icon: 'layui-icon-tips'
					}]
					,title: '发布文章数据表',
					// width: '100%',
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'id',
							title: 'ID',
							width: "20%",
							fixed: 'left',
							sort: true
						}, {
							field: 'title',
							title: '文章标题',
							width: "10%"
						}, {
							field: 'category',
							title: '文章分类',
							width: "10%"
						},{
							field: 'introduction',
							title: '文章简介',
							width: "20%"
						}, {
							field: 'time',
							title: '发布时间',
							width: "10%",
							sort: true
						}, {
							field: 'content',
							title: '文章内容',
							width: "20%"
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					page: true
				});


				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(JSON.stringify(data));
							break;
						case 'getCheckLength':
							var data = checkStatus.data;
							layer.msg('选中了：' + data.length + ' 个');
							break;
						case 'isAll':
							layer.msg(checkStatus.isAll ? '全选' : '未全选');
							break;

							//自定义头工具栏右侧图标 - 提示
						case 'LAYTABLE_TIPS':
							layer.alert('这是工具栏右侧自定义的一个图标按钮');
							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					//console.log(obj)
					if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
						});
					} else if (obj.event === 'edit') {
						console.log(data);
						layer.open({
							type: 2,
							title: '编辑',
							shadeClose: true,
							shade: 0.8,
							maxmin: true,
							area: ['800px', '90%'],
							content: '/html/modify_news.html?id=' + data.id,
							end : function(){
								console.log("页面被销毁");
								location.reload([true]);  //刷新当前页面
							}
						});
					}
				});
			});
		</script>
	</body>
</html>
